<template>
  <div class="main">
    <div class="header">购物车</div>
    <van-checkbox-group v-model="buy">
      <div v-for="item in carlist" :key="item.goods_id" class="cartlist">
        <div class="leftlist">
          <van-checkbox :name="item.goods_id" @click="ifclick"></van-checkbox>
          <!-- <input type="checkbox" v-model="buy" :value="item.goods_id" /> -->
          <img :src="item.goods_img" alt="" />
        </div>
        <div class="rightlist">
          <div>{{ item.goods_name }}</div>
          <div>
            <span>￥{{ item.goods_price }}</span>
            <p>
              <button
                @click="reduce(item)"
                :class="{ noclick: item.goods_count == '1' }"
              >
                -
              </button>
              <input type="text" :value="item.goods_count" />
              <button @click="add(item)">+</button>
            </p>
          </div>
        </div>
      </div>
    </van-checkbox-group>
    <div class="bottom">
      <div class="btop">您的订单为虚拟订单(支付后不发货),请勿支付大额款项!</div>
      <div class="bbottom">
        <van-checkbox v-model="checked" @click="all">全选</van-checkbox>
        <div class="bright">
          <div>
            合计：<span>￥{{ price }}</span>
          </div>
          <a href="" target="_blank" class="alink"
            ><p @click="pay" :class="{ canpay: price != '0.00' }">支付</p></a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Checkbox, CheckboxGroup, Dialog,Toast  } from "vant";
import moment from "moment";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Dialog);
Vue.use(Toast);
export default {
  data() {
    return {
      carlist: [],
      buy: [],
      isCheckAll: false,
      checked: false,
    };
  },
  beforeCreate() {
    this.$http.get("/api").then((ret) => {
      this.carlist = ret.cartInfo;
    });
  },
  created() {},
  methods: {
    add(item) {
      item.goods_count++;
    },
    reduce(item) {
      if (item.goods_count == "1") {
        return;
      } else {
        item.goods_count--;
      }
    },
    all() {
      this.buy = [];
      if (this.checked) {
        for (var i = 0; i < this.carlist.length; i++) {
          this.buy.push(this.carlist[i].goods_id);
        }
      } else {
      }
    },
    ifclick() {
      this.ifall();
    },
    ifall() {
      if (this.buy.length == this.carlist.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    pay() {
      if (this.price == "0.00") {
        window.event.preventDefault();
        return;
      } else {
        var time1 = moment().format("YYYYMMDDHHmmss");
        var code1 = time1 + "" + (parseInt(Math.random() * 1000000) + 100000);
        localStorage.setItem("code1", code1);
        document.getElementsByClassName("alink")[0].href =
          "https://m.28sjw.com/alipay_wap/alipayapi.php?WIDout_trade_no=" +
          code1 +
          "&WIDsubject=" +
          escape("Vue综合练习（崔灏）") +
          "&WIDtotal_fee=1";
        Dialog.confirm({
          title: "支付成功？",
          message: "如果您已经支付成功，请点击“确认”",
        })
          .then(() => {
            this.$http
              .get(
                "https://m.28sjw.com/order/orderPayStatusCheck.php?_oid=" +
                  code1 +
                  ""
              )
              .then((ret) => {
                if(ret.status=="0"){
                    Toast.fail('支付失败！');
                }else{
                    Toast.success('支付成功！');
                }
              });
          })
          .catch(() => {
            // on cancel
          });
      }
    },
  },
  computed: {
    price() {
      var price1 = 0.0;
      this.carlist.forEach((el) => {
        if (this.buy.includes(el.goods_id)) {
          price1 += el.goods_count * el.goods_price;
        }
      });
      price1 = price1.toFixed(2);
      return price1;
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.cartlist {
  background-color: #fafafa;
  overflow: hidden;
  margin-bottom: 15px;
  padding: 10px 0;
  .leftlist {
    float: left;
    .van-checkbox {
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
      top: -30px;
      margin: 0 10px;
      border-radius: 50%;
      border: 1px solid #cbccce;
    }
  }
  .rightlist {
    div {
      &:nth-last-of-type(1) {
        margin-top: 20px;
      }
    }
    span {
      float: left;
    }
    p {
      float: right;
      margin: 0;
      input {
        text-align: center;
        width: 32px;
        height: 28px;
        box-sizing: border-box;
        padding: 0;
        margin: 0 5px;
        border: none;
        background-color: #dee1e6;
      }
      .noclick {
        background-color: #f7f8fa;
      }
      button {
        border: none;
        background-color: #dee1e6;
        text-align: center;
        width: 32px;
        height: 28px;
        box-sizing: border-box;
      }
    }
  }
}
.bottom {
  position: fixed;
  bottom: 0px;
  width: 100%;
  .btop {
    background-color: #fff7cc;
    padding: 8px 12px;
    font-size: 12px;
    color: #f56723;
  }
  .bbottom {
    padding: 20px 12px 0px;
    overflow: hidden;
    .van-checkbox {
      float: left;
    }
    .bright {
      float: right;
      div {
        float: left;
        span {
          color: #f13824;
        }
      }
      p {
        float: left;
        margin: 0px;
        width: 100px;
        height: 40px;
        border-radius: 20px;
        background-image: linear-gradient(to right, #ffb09a, #f88c98);
        line-height: 40px;
        text-align: center;
        color: white;
        position: relative;
        top: -10px;
        margin-left: 5px;
      }
      .canpay {
        background-image: linear-gradient(to right, #ff5f34, #ef0d25);
      }
    }
  }
}
</style>